import React, { useRef, useState} from 'react';
import {Card,DatePicker} from 'antd';
import {GridContent} from '@ant-design/pro-layout';
import ProTable from '@ant-design/pro-table';
import {getPerformanceList} from '../service';
import {Chart, Geom, Axis,Tooltip,Legend,} from "bizcharts";

const Performance = ({code}) => {
  const actionRef = useRef();
  const actionRef2 = useRef();
  const { RangePicker } = DatePicker;

  // useEffect(() => {
  // }, []);

  const monthColumns = [
    {
      title: '选择月份',
      hideInTable: true,
      dataIndex: 'date',
      renderFormItem: (item, props) => {
        return <RangePicker picker="month" className='widthStyle' {...props}/>;
      }
    },
    {
      title: '月份',
      hideInSearch: true,
      dataIndex: 'assessMonth',
      align: 'center',
    },
    {
      title: '最终得分',
      hideInSearch: true,
      dataIndex: 'performanceScore',
      align: 'center',
    },
  ];
  const quarterlyColumns = [
    {
      title: '时间',
      hideInSearch: true,
      dataIndex: 'beldate',
      align: 'center',
    },
    {
      title: '级别',
      hideInSearch: true,
      dataIndex: 'beldate',
      align: 'center',
    },
    {
      title: '系数',
      hideInSearch: true,
      dataIndex: 'beldate',
      align: 'center',
    },
  ];
  const chartsData = [
    {
      time: "10:10",
      call: 4,
      季度绩效: 2,
      月度绩效: 2
    },
    {
      time: "10:15",
      call: 2,
      季度绩效: 6,
      月度绩效: 3
    },
    {
      time: "10:20",
      call: 13,
      季度绩效: 2,
      月度绩效: 5
    },
    {
      time: "10:25",
      call: 9,
      季度绩效: 9,
      月度绩效: 1
    },
    {
      time: "10:30",
      call: 5,
      季度绩效: 2,
      月度绩效: 3
    },
    {
      time: "10:35",
      call: 8,
      季度绩效: 2,
      月度绩效: 1
    },
    {
      time: "10:40",
      call: 13,
      季度绩效: 1,
      月度绩效: 2
    }
  ];

  return (
    <>
      <GridContent>
        <ProTable
          actionRef={actionRef}
          rowKey="assessMonth"
          style={{marginBottom: 24}}
          request={(params) => getPerformanceList(params, code)}
          columns={monthColumns}
          headerTitle="月度绩效"
          // tableExtraRender={(_, data) => (
          //   <Card style={{marginBottom: 24}} bordered={false}>
          //     <Chart forceFit={true} height={500} data={chartsData} padding="auto">
          //       <Legend custom={true} allowAllCanceled={true} position="top-left" title={null} dx={20}
          //         items={[
          //           // {value: "季度绩效",marker: {symbol: "square", fill: "#3182bd",radius: 5}},
          //           {value: "月度绩效",marker: {symbol: "hyphen", stroke: "#ffae6b",radius: 5,lineWidth: 3}}
          //         ]}
          //       />
          //       <Axis name="月度绩效" grid={null} label={{ textStyle: {fill: "#fdae6b"}}}/>
          //       <Tooltip />
          //       {/*<Geom type="interval" position="time*季度绩效" color="#3182bd" />*/}
          //       <Geom type="line" position="time*月度绩效" color="#fdae6b" size={3} shape="smooth"/>
          //       <Geom type="point"  position="time*月度绩效" color="#fdae6b" size={3} shape="circle"/>
          //     </Chart>
          //   </Card>
          // )}
        />
        {/*<ProTable*/}
        {/*  actionRef={actionRef2}*/}
        {/*  rowKey="id"*/}
        {/*  search={false}*/}
        {/*  style={{marginBottom: 24}}*/}
        {/*  dataSource={data}*/}
        {/*  columns={quarterlyColumns}*/}
        {/*  headerTitle="季度绩效"*/}
        {/*/>*/}
      </GridContent>
    </>
  );
};
export default Performance;
